<template>
	<view class="album-list">
		<view class="album-item" :style="{'--a-height':aHeight}" v-for="(item,index) in list" :key="index">
			<view class="cover-img" v-if="isVideo" @click="onPreviewMedia(index)">
				<image style="width: 100%;height: 100%;" :src="item.url+(item.type=='video'?'?x-oss-process=video/snapshot,t_10000,m_fast':'?x-oss-process=image/resize,w_750/quality,Q_60')" mode="aspectFill"></image>
			</view>
			<view class="cover-img" v-else @click="onPreviewImage(index)">
				<image style="width: 100%;height: 100%;" :src="item" mode="aspectFill"></image>
			</view>
			<view class="video-icon" v-if="isVideo&&item.type=='video'">
				<u-icon color="#f7f7f7" size="36" name="movie"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			},
			isVideo: {
				type: Boolean,
				default: false
			},
			aHeight: {
				type: String,
				default: '26vw'
			}
		},
		methods: {
			onPreviewMedia(current) {
				let sources = this.list.map(item => {
					return {
						url: item.url, type: item.type||'image',
						poster: '' // 由于微信自身bug,预览最好不要使用封面图
						// poster: item.url+'?x-oss-process=video/snapshot,t_10000,m_fast'
					}
				})
				wx.previewMedia({ current, sources });
			},
			onPreviewImage(current) {
				uni.previewImage({ current, urls:this.list });
			}
		},
	}
</script>

<style scoped>
	.album-list {
		width: 100%;
		display: grid;
		grid-template-columns: auto auto auto;
		grid-gap: 10rpx;
	}
	.album-item {
		height: var(--a-height);
		background-color: #f7f7f7;
		position: relative;
	}
	.cover-img {
		width: 100%;
		height: 100%;
	}
	.video-icon {
		position: absolute;
		top: 0;left: 0;
		width: 100%;
		height: 100%;
		display: grid;
		place-items: center;
		background: rgba(0, 0, 0, 0.2);
		pointer-events: none;
	}
</style>